<template>
  <q-scroll-area class="fit">
    <q-list bordered>
      <!-- 主页  -->
      <q-item
        clickable
        :active="route.fullPath === layout.mainPage.path"
        @click="router.push({ path: layout.mainPage.path })"
      >
        <q-item-section avatar>
          <q-icon :name="layout.mainPage.icon" />
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ layout.mainPage.name }}</q-item-label>
        </q-item-section>
      </q-item>
      <!-- 菜单组件 -->
      <menu-item :menu-tree="layout.menuTree"></menu-item>
    </q-list>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import { useLayoutStore } from 'src/stores/layout-store';
import { useRoute, useRouter } from 'vue-router';
import myRoute from 'src/router/my-router';
const MenuItem = defineAsyncComponent(() => import('./MenuItem.vue'));
const route = useRoute();
const router = useRouter();
const layout = useLayoutStore();
// 赋值菜单数据
layout.menuList = myRoute as Array<WJ.MenuItem>;
</script>

<style scoped></style>
